<template>
  props：{{props}}<br>
  state1：{{ state1 }}<br>
  <el-button type="" @click="add">测试</el-button><br> 
  <slot></slot>
  <div v-for="(item, index) in list" :key="index">
    <slot name="col" :row="item" :index="index" ></slot>
  </div>
</template>

<script setup lang="ts" generic="T extends Object ">
// string | number
// {name: string}
  import { defineStore } from 'pinia'
  
  const props = defineProps<{
    list: T[], // 泛型的方式
    list2: number[], // 只能是 number 类型的数组
    list3: Array<any>, // 任意类型的数组
    name: string,
    person: {
      name: string
    }
  }>()

  console.log('props-ts:\n', props)

  const slot = defineSlots<{
    default(props: any): any,
    col(props:
      {
        row: T,
        index: number
      }): any
  }>()
  console.log('slot:\n', slot)

  // props.name = '内部修改 ref'
  // props.person.name = '内部修改 person'

  // const { name } = props

  // console.log('props-name:\n', name)

  const state2 =  defineStore('counter', {
    state: () => {
      return { count: 0 }
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })
    actions: {
      increment() {
        this.count++
      },
    },
  })

  const state1 = state2()
  console.log('state:\n', state1)

  const add = () => {
    state1.increment()
  }

</script>